import Container from "@/components/container"
import {Chat} from "@douyinfe/semi-ui"
import {useState, useCallback} from "react";

let id = 0;

function getId() {
    return `id-${id++}`
}

const Assistant = () => {

    const defaultMessage = [
        {
            role: 'system',
            id: '1',
            createAt: 1715676751919,
            content: "Hello, I'm your AI assistant.",
        },
        {
            role: 'user',
            id: '2',
            createAt: 1715676751919,
            content: "给一个 Semi Design 的 Button 组件的使用示例",
        },
        {
            role: 'assistant',
            id: '3',
            createAt: 1715676751919,
            content: "以下是一个 Semi 代码的使用示例：\n\`\`\`jsx \nimport React from 'react';\nimport { Button } from '@douyinfe/semi-ui';\n\nconst MyComponent = () => {\n  return (\n    <Button>Click me</Button>\n );\n};\nexport default MyComponent;\n\`\`\`\n",
        }
    ];

    const roleInfo = {
        user: {
            name: 'User',
            avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png'
        },
        assistant: {
            name: 'Assistant',
            avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png'
        },
        system: {
            name: 'System',
            avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png'
        }
    }

    const [message, setMessage] = useState(defaultMessage);

    const onMessageSend = useCallback((content: any, attachment: any) => {
        console.log(content);
        console.log(attachment);
        const newAssistantMessage = {
            role: 'assistant',
            id: getId(),
            createAt: Date.now(),
            content: "这是一条 mock 回复信息",
        }
        setTimeout(() => {
            setMessage((message) => ([...message, newAssistantMessage]));
        }, 200);
    }, []);

    const onChatsChange = useCallback((chats: any) => {
        setMessage(chats);
    }, []);

    const onMessageReset = useCallback((_: any) => {
        setTimeout(() => {
            setMessage((message) => {
                const lastMessage = message[message.length - 1];
                const newLastMessage = {
                    ...lastMessage,
                    status: 'complete',
                    content: 'This is a mock reset message.',
                }
                return [...message.slice(0, -1), newLastMessage]
            })
        }, 200);
    }, [])

    const [height, setHeight] = useState(100)

    return <Container>
        <div style={{height: '100%'}} ref={ref => setHeight(ref?.clientHeight || 100)}>
            <Chat
                align={'leftRight'}
                mode={'bubble'}
                uploadProps={{action: '/'}}
                style={{height: height, overflowY: 'auto', overflowX: 'hidden'}}
                chats={message}
                roleConfig={roleInfo}
                onChatsChange={onChatsChange}
                onMessageSend={onMessageSend}
                onMessageReset={onMessageReset}
                uploadTipProps={{content: '选择一个图片'}}
            />
        </div>
    </Container>
}

export default Assistant